<template>
	<view class="content">
		<u-sticky>
			<view class="search">
				<view class="formInput">
					<u-input placeholder="请输入"></u-input>
				</view>
				<u-image src="/static/img/home/scan.png" width="24" height="24"></u-image>
			</view>
			<view class="asatic">
				<view class="total"><text>共计 {{total}} 件备品</text></view>
				<view class="dotLine"></view>
				<view class="sort">
					<text>默认排序</text>
					<u-image src="/static/img/home/arrow.png" width="12" height="12"></u-image>
				</view>
			</view>
		</u-sticky>
		<view class="products">
			<view class="item" v-for=" item,index in products" :key="index">
				<view class="title">
					<view class="intro">
						<text>{{item.name}}</text>
						<u-image src="/static/img/home/edit.png" width="12" height="12"></u-image>
					</view>
					<view class="no"><text>备品编号：{{item.identify}}</text></view>
				</view>
				<view class="infos">
					<view class="msg">
						<u-grid col="2">
							<u-grid-item><text class="gird">规格分类：{{item.spec}}</text></u-grid-item>
							<u-grid-item><text class="gird">库存数量：{{item.number}}件</text></u-grid-item>
							<u-grid-item><text class="gird">所在仓库：{{item.warehouse.name}}</text></u-grid-item>
							<u-grid-item><text class="gird">所在库位：{{item.zone.name}}</text></u-grid-item>
						</u-grid>
					</view>
					<view class="image">
						<u-image v-if="item.photos!=''" :src="item.photos" width="88" height="88"></u-image>
						<u-image v-else src="/static/img/logo.png" width="88" height="88"></u-image>
					</view>
				</view>
			</view>
		</view>
		<view class="addSpare">
			<u-button text="新增备品" type="primary" @click="handleGo('/pages/spare/addSpare')"></u-button>
		</view>
	</view>
</template>

<script>
	import {spareNotes} from '@/config/api'
	export default {
		data() {
			return {
				total: 0,
				products:[],
				pageSize:10,
				page:1,
			}
		},
		onLoad() {
				this.getSparesNote();
		},
		methods: {
			
			async  getSparesNote(page){
				const params={
					page:page,
					pageSize:this.pageSize,
				};
				const res = await spareNotes(params);
				this.total=res.total;
				this.products=res.items;
				if(res.total/this.pageSize>1){
					this.page++;
				}
			},
			handleGo(str){
				uni.navigateTo({
					url:`${str}`
				})
			},
			
		},
		onReachBottom(){
			this.getSparesNote(this.page);
		}
	}
</script>

<style lang="less">
	page {
		background-color: rgb(248, 248, 248);
		font-size: 24rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
	}

	.search {
		display: flex;
		flex-direction: row;
		background-color: #fff;
		align-items: center;
		box-sizing: border-box;
		padding: 0 32rpx 8rpx 32rpx;
	}

	.formInput {
		display: flex;
		flex: 2;
		margin-right: 16rpx;
	}

	.asatic {
		display: flex;
		flex-direction: row;
		background-color: #fff;
		align-items: center;
		justify-content: space-evenly;
		box-sizing: border-box;
		margin-top: 8rpx;
		padding: 32rpx;
	}

	.dotLine {
		width: 4rpx;
		height: 24rpx;
		background-color: rgb(204, 204, 204);
	}

	.sort {
		display: flex;
		flex-direction: row;
		align-items: center;

	}
	.products{
		display: flex;
		flex-direction: column;
		margin-bottom: 130rpx;
	}
	.item{
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 24rpx;
		border-radius: 10rpx;
		margin: 20rpx 32rpx 0 32rpx;
	}
	.title{
		display: flex;
		flex-direction: column;
	}
	.intro{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.no{
		padding: 32rpx 0;
		border-bottom: 2rpx solid rgb(204, 204, 204);
		
	}
	.infos{
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
	}
	.msg{
		
	}
	.gird{
		padding: 20rpx 24rpx;
	}
	.addSpare{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>